<template>
	<view class="main-cont box box-tb box-pack-start box-align-center">
		<view class="top">
			<view class="search box box-align-center box-pack-start mt20">
				<u-input v-model="searchtext" type="text" :border="border" :custom-style="customStyles"
					placeholder="搜索教师" />
				<u-image src="@/static/class/icon_search.png" width="34rpx" height="34rpx" @click="listtrs">
					<u-loading slot="loading"></u-loading>
				</u-image>
			</view>
		</view>
		<view class="group">
			<view class="bottom">
				<view class="stu-list box box-align-center box-pack-between" :class="{active:i == value}"
					v-for="(item,i) in list" :key="i" @click="selectTr(item,i)">
					<view class="box box-align-center box-pack-start">
						<u-avatar :src="item.icon" size="73"></u-avatar>
						<view class="ml5 mr5 stu-name">
							{{item.name}}
						</view>
					</view>
					<view class="xh">
						{{item.mobile}}
					</view>
				</view>
			</view>
		</view>
		<view class="posa">
			<u-button type="primary" :custom-style="customStyle" :ripple="true" @click="confirm()"
				:disabled="btndisabled">确 定</u-button>
		</view>
		<u-top-tips ref="uTips"></u-top-tips>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				openid: '',
				unionid: '',
				schoolid: '',
				userid: '',
				searchtext: '',
				list: [],
				customStyles: {
					width: "560rpx",
					padding: "40rpx",
					color: "#000"
				},
				customStyle: {
					width: "466rpx",
					padding: "40rpx",
					color: "#fff",
					backGround: '#7686F6',
					boxShadow: '0px 2rpx 10rpx 0px #DADCE8'
				},
				value: -1,
				selectId: '',
				classid: '',
				btndisabled: true,
				trname: ''
			}
		},
		onLoad: function(opt) {
			this.schoolid = opt.schoolid;
			this.classid = opt.classid;
			this.listtrs();
		},
		methods: {
			listtrs() {
				this.$api.post({
					url: '/dteacher/schooltrlist'
				}, {
					schoolid: this.schoolid,
					searchtext: this.searchtext
				}).then(s => {
					this.list = s.list;
					//console.log(this.list)
				})
			},
			selectTr(item, i) {
				wx.vibrateShort();
				this.value = i;
				this.selectId = item.id;
				this.btndisabled = false;
				this.trname = item.name;
			},
			confirm() {
				this.$api.post({
					url: '/dteacher/changeclasstr'
				}, {
					classid: this.classid,
					trid: this.selectId,
					trname: this.trname
				}).then(s => {
					if (s.code == '0') {
						this.$refs.uTips.show({
							title: '转让成功',
							type: 'success',
							duration: '2300'
						});
						setTimeout(() => {
							uni.navigateBack();
						}, 2300);
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.top {
		width: 100%;
		background-color: #fff;
		padding-bottom: 25rpx;
	}

	.search {
		margin: 20rpx auto 0;
		width: 710rpx;
		height: 86rpx;
		background: #F3F4FB;
		border-radius: 43rpx;
	}

	.active {
		background: #93a1ff;
		color: #FFFFFF;
		border-radius: 4px;
	}



	.posa {
		position: absolute;
		bottom: 0;
		// left: 50%;
		transform: translate(0, -50%);
	}

	.main-cont {
		position: relative;
		width: 100%;
		height: 100%;

		.list {
			padding: 0 39rpx;
			width: 100%;
			height: 140rpx;
			background: #FFFFFF;
			border: 2rpx solid #FFFFFF;

			.icon {
				width: 8rpx;
				height: 84rpx;
				background: #FE907E;
				border-radius: 4rpx;
			}

			.class-name {
				font-size: 32rpx;
			}

			.tab {
				font-size: 26rpx;
				color: #6E73D8;
			}

			.edit {
				width: 168rpx;
				height: 46rpx;
				line-height: 46rpx;
				background: #626BF1;
				border-radius: 23rpx;
				font-size: 24rpx;
				color: #fff;
				text-align: center;
			}
		}

		.group {
			margin: 20rpx 14rpx;
			width: 722rpx;
			background: #FFFFFF;
			border-radius: 20rpx;

			.top {
				padding: 0 39rpx;
				height: 98rpx;
				line-height: 98rpx;
				border: 2rpx solid #F0F1F8;
			}

			.bottom {
				height: 500px;
				overflow-y: scroll;
				padding-bottom: 20px;
				padding:0 30px 20px;

				.stu-list {
					padding: 0 60rpx;
					height: 130rpx;
				}

				.stu-name {
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					font-size: 28rpx;
					color: #181623;
				}

				.tab {
					width: 86rpx;
					height: 28rpx;
					line-height: 28rpx;
					background: #FFE2CC;
					border-radius: 5rpx;
					text-align: center;
					font-size: 24rpx;
					color: #E96501;
				}
			}
		}
	}
</style>
